<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-22 05:23:33
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:22:06
-->
<template>
  <div class="UM_box">
    <div class="UM_box_header">
      <i class="el-icon-menu"/>
      用户数据列表
    </div>
    <el-table
      class="UM_table"
      :data="tableData"
      min-height="500px"
      :default-sort = "{prop: 'name', order: 'ascending'}"
      highlight-current-row
      border
      stripe
    >
      <el-table-column
        prop="name"
        label="用户名"
        width="120"
      />
      <el-table-column
        prop="Location"
        label="所属检测点"
        min-width="270"
      />
      <el-table-column
        prop="phoneNumber"
        label="手机号"
        width="130"
      />
      <el-table-column
        prop="address"
        label="住址"
        width="270"
      />
      <el-table-column
        prop="type"
        label="权限"
        width="120"
      />
      <el-table-column
        label="操作"
        width="270"
      >
        <template slot-scope="scope">
          <el-link
            type="primary"
            style="margin-right: 10px;"
            :underline="false"
            @click="handleCheck(scope.$index, scope.row)"
          >
            查询检测结果
          </el-link>
          <el-link
            type="warning"
            style="margin-right: 10px;"
            :underline="false"
            @click="handleEdit(scope.$index, scope.row)"
          >
            修改权限
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除用户
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="修改用户权限"
      width="600px"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form label-width="120px">
        <el-form-item label="用户名">
          <el-input
            style="width: 240px;"
            v-model="nowRow.name"
            disabled
          />
        </el-form-item>
        <el-form-item label="用户权限">
          <el-select
            style="width: 240px;"
            v-model="nowRow.type"
            placeholder="请选择用户权限"
          >
            <el-option label="DOCTOR" value="DOCTOR"/>
            <el-option label="CONSUMER" value="CONSUMER"/>
            <el-option label="VOLUNTEER" value="VOLUNTEER"/>
            <el-option label="APPROVAL" value="APPROVAL"/>
            <el-option label="MANAGER" value="MANAGER"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  adminCheckUser,
  adminDeleteUser,
  adminUpdateUser
} from '@/api/admin/adminUser';
export default {
  name: 'UserManage',
  data() {
    return {
      tableData: [],
      nowRow: {},
      dialogFormVisible: false
    }
  },
  created() {
    this.$store.dispatch('region/getAllInfo', 0).then((regionData) => {
      adminCheckUser().then((data) => {
        data.forEach(item => {
          const obj = regionData.filter(d => d.regionId === item.defaultRegion)[0];
          item.Location = obj.province + obj.city + obj.area + obj.testLocation;
          this.tableData.push(item);
        });
      });
    });
  },
  methods: {
    handleCheck(index, row) {
      this.$store.commit('admin/setUser', row);
      this.$router.push({ name: 'CheckNATR' });
    },
    handleEdit(index, row) {
      this.nowRow = row;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {
      this.$confirm('此操作永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adminDeleteUser(row).then(() => {
          this.tableData.splice(index, 1);
          this.$message.success('删除成功');
        });
      });
    },
    handleSubmit() {
      const input = {};
      input.userId = this.nowRow.userId;
      input.newType = this.nowRow.type;
      adminUpdateUser(input).then(() => {
        this.$message.success('修改成功');
        this.dialogFormVisible = false;
      });
    }
  }
}
</script>

<style lang="scss">
.UM_box {
  background: #FFFFFF;
  display: inline-block;
  width: calc(100% - 100px);
  min-width: 1250px;
  margin: 50px 50px 0px 50px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.2);

  .UM_box_header {
    background: #EEE;
    padding: 5px;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #DDD;
  }

  .UM_table {
    width: calc(100% - 40px);
    margin: 20px 20px 10px 20px;

    .UM_table_expand {
      font-size: 0;
    }
    .UM_table_expand label {
      width: 90px;
      color: #005187;
    }
    .UM_table_expand .el-form-item {
      margin: 0px 0px 0px 10px;
      width: 60%;
    }
  }
}

</style>